<template>
  <div>
    <div class="title-wrapper">
      <h3>待办消息</h3>
      <Button @click="handleMuApprovalClick" type="primary">批量审批</Button>
    </div>

    <Form :model="searchForm" class="search-form" inline ref="searchForm">
      <FormItem class="process-type" prop="businessname">
        <Input placeholder="审批类型" v-model="searchForm.businessname" />
      </FormItem>
      <FormItem class="process-type" prop="organizer">
        <Input placeholder="发起人" v-model="searchForm.organizer" />
      </FormItem>
      <!-- <FormItem class="process-type" prop="projectname">
        <Input placeholder="单位工程名称" v-model="searchForm.projectname" />
      </FormItem> -->
      <FormItem>
        <Button @click="handleResetSearchForm" class="reset-btn">重置</Button>
        <Button @click="handleSearchClick" type="primary">查询</Button>
      </FormItem>
    </Form>

    <Table
      :columns="tableColumns"
      :data="tableData"
      :loading="tableLoading"
      @on-selection-change="handleSelectionChange"
      border
      ref="tableRef"
      stripe
    >
      <template slot="action" slot-scope="{ row}">
        <Button @click="handleReplyClick(row)" size="small" style="margin: 0 5px;" type="info">审批</Button>
      </template>
    </Table>
    <div class="page-wrapper">
      <Page
        :page-size="pageSize"
        :total="total"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        show-sizer
        show-total
      />
    </div>
    <Modal
      @on-cancel="handleMuApprovalCancel"
      class="muapproval-modal"
      title="批量审批"
      v-model="muApprovalModalVisiable"
    >
      <h4 class="selectapproval-text">已选择审批数量：{{ tableSelection.length }}</h4>
      <Form :model="muApprovalForm" :rules="muApprovalFormRules" ref="muApprovalForm">
        <FormItem prop="muApprovalMsg">
          <Input
            :rows="4"
            placeholder="请填写审批意见"
            type="textarea"
            v-model="muApprovalForm.muApprovalMsg"
          />
        </FormItem>
      </Form>

      <div slot="footer">
        <!-- <Button @click="handleApprovalBack">打回上一步</Button> -->
        <Button @click="handleApprovalBackFirst" ghost type="primary">打回发起人</Button>
        <Button @click="handleApprovalClick" type="primary">同意</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  getTodoList,
  muApproval,
  muApprovalBackFirst,
  muApprovalBack
} from '@/api/message';
import dayjs from 'dayjs';
import { mapState, mapActions } from 'vuex';

export default {
  data () {
    return {
      searchForm: {
        businessname: '', // 审批名称
        organizer: '' // 发起人
        // projectname: '' // 单位工程名称
      },

      tableColumns: [
        { type: 'selection', width: 55, align: 'center' },
        { title: '审批类型', key: 'typeName', align: 'center' },
        { title: '审批名称', key: 'approvalName', align: 'center' },
        { title: '合同段', key: 'htDuan', align: 'center' },
        { title: '审批节点', key: 'approvalNode', align: 'center' },
        { title: '发起人部门', key: 'organizerDept', align: 'center' },
        { title: '发起人', key: 'organizer', align: 'center' },
        { title: '发起时间', key: 'initiateTimeText', align: 'center' },
        { title: '到达时间', key: 'arrivalsTimeText', align: 'center' },
        { title: '操作', width: 90, slot: 'action', align: 'center' }
      ],
      tableData: [],
      tableLoading: true,
      tableSelection: [],

      // 分页
      total: 100,
      pageNum: 1,
      pageSize: 10,

      muApprovalModalVisiable: false, // 批量审批弹窗
      muApprovalForm: {
        muApprovalMsg: ''
      },
      muApprovalFormRules: {
        muApprovalMsg: [{ required: true, message: '请填写审批意见' }]
      }
    };
  },
  mounted () {
    this.getList();
  },
  computed: {
    ...mapState({
      waitNumber: state => state.user.waitNumber
    })
  },
  methods: {
    ...mapActions(['getUserInfo']),

    async getList () {
      // this.$store.dispatch('user/getUserInfo');
      this.getUserInfo();
      this.tableLoading = true;
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      if (this.searchForm.businessname) {
        data.businessname = this.searchForm.businessname;
      }
      if (this.searchForm.organizer) {
        data.organizer = this.searchForm.organizer;
      }
      // if (this.searchForm.projectname) {
      //   data.projectname = this.searchForm.projectname;
      // }

      // console.log('我的待办 data=>', data);
      const resp = await getTodoList(data);
      // console.log('我的待办 resp=>', resp);
      this.tableLoading = false;

      const info = resp.data.data;
      this.total = info.total;
      this.tableData = info.list;
      this.tableData.forEach(item => {
        if (item.initiateTime) {
          item.initiateTimeText = dayjs(item.initiateTime).format('YYYY-MM-DD');
        }
        if (item.arrivalsTime) {
          item.arrivalsTimeText = dayjs(item.arrivalsTime).format('YYYY-MM-DD');
        }
      });
    },
    handleResetSearchForm () {
      this.$refs.searchForm.resetFields();
      this.getList();
    },
    handleSearchClick () {
      this.getList();
    },
    handleReplyClick (row) {
      console.log('row', JSON.stringify(row, 2, 2));
      this.$router.push({
        path: '/msg_program/msg_todo/detail',
        query: {
          dataid: row.dataid,
          type: row.type,
          approvalName: row.approvalName
        }
      });
    },
    // 页码切换
    pageChange (page) {
      this.pageNum = page;
      this.getList();
    },
    // 页条数切换
    pageSizeChange (size) {
      this.pageSize = size;
      this.getList();
    },
    handleSelectionChange (selection) {
      this.tableSelection = selection;
    },
    handleMuApprovalClick () {
      if (this.tableSelection.length === 0) {
        this.$Message.warning('请选择需要批量审批的内容');
        return;
      }
      this.muApprovalModalVisiable = true;
    },
    // 批量审批操作
    handleApprovalClick () {
      this.$refs.muApprovalForm.validate(async valid => {
        if (valid) {
          const nodeids = this.tableSelection
            .map(item => item.nodeId)
            .join(',');
          const data = {
            optinions: this.muApprovalForm.muApprovalMsg,
            nodeids
          };

          // console.log('批量审批 data=>', data);
          await muApproval(data);
          // console.log('批量审批 resp=>', resp);
          // this.$store.dispatch('user/getUserInfo');
          this.muApprovalModalVisiable = false;
          this.$Message.success('操作成功');
          this.getList();
        }
      });
    },
    handleApprovalBackFirst () {
      this.$refs.muApprovalForm.validate(async valid => {
        if (valid) {
          const nodeids = this.tableSelection
            .map(item => item.nodeId)
            .join(',');
          const data = {
            opinions: this.muApprovalForm.muApprovalMsg,
            nodeId: nodeids
          };

          // console.log('驳回发起人 data=>', data);
          await muApprovalBackFirst(data);
          // console.log('驳回发起人 resp=>', resp);
          this.muApprovalModalVisiable = false;
          this.$Message.success('操作成功');
          this.getList();
        }
      });
    },
    handleApprovalBack () {
      this.$refs.muApprovalForm.validate(async valid => {
        if (valid) {
          const nodeids = this.tableSelection
            .map(item => item.nodeId)
            .join(',');
          const data = {
            opinions: this.muApprovalForm.muApprovalMsg,
            nodeId: nodeids
          };

          // console.log('驳回上一步 data=>', data);
          await muApprovalBack(data);
          // console.log('驳回上一步 resp=>', resp);
          this.muApprovalModalVisiable = false;
          this.$Message.success('操作成功');
          this.getList();
        }
      });
    },
    handleMuApprovalCancel () {
      this.$refs.muApprovalForm.resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.title-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.search-form {
  display: flex;
  .reset-btn {
    margin-right: 10px;
  }
  > .ivu-form-item:last-child {
    margin-right: 0;
  }
}
.page-wrapper {
  .ivu-page {
    float: right;
    margin: 10px 0;
  }
}
.muapproval-modal {
  /deep/ .ivu-modal-body {
    padding: 30px 50px;
  }
  .selectapproval-text {
    margin-bottom: 10px;
  }
}
</style>
